import { useState, useEffect } from 'react';
import { Dimensions, FlatList, StyleSheet, TouchableOpacity, Text, Button, View, Image, ImageBackground, ScrollView } from 'react-native';
import axios from '../../api/axios'
import { useAuth, baseURL } from '../../context/AuthProvider';

const Btn = ({ children, style, color, ...rest }) => {
  return (
    <TouchableOpacity {...rest} style={
      {
        justifyContent: "center",
        alignItems: "center",
        ...style
      }
    }>
      <Text style={{ color: color ? color : '#FFF' }}>{children}</Text>
    </TouchableOpacity>
  )
}
const { width, height } = Dimensions.get('window');
const tagsData = [
  { label: '水果', id: '1', },
  { label: '蔬菜', id: '2', },
  { label: '鲜花', id: '3', },
];
const AddCrop = ({navigation}) => {
  const [selectTab, setSelectTab] = useState("1");
  const [plantBImg, setPlantImg] = useState({});
  const [plantSImgs, setPlantSImgs] = useState([]);
  const [cropsid, setCropsid] = useState(0)
  const { user } = useAuth()
  useEffect(() => {
    axios.post('/crop/selecttags', {
      croptype: selectTab
    }).then(res => {
      // console.log(res);
      if (res.code == 200) {
        setPlantSImgs(res.data);
      }
    })
  }, [selectTab])
  const select = ()=>{
    if(user.city){
      axios.post('/crop/addcrops', {userid: user.userid, cropid: cropsid}).then(res=>{
        console.log(res.data);
        console.log("八百标兵奔北坡");
        navigation.navigate('MyCrops')
    })
    } else{
      alert("请先在我的-修改用户信息中进行城市选择，以便于我们对您的作物所在城市天气进行提示，修改成功后再来添加作物哦")
    }

  }
  return (
    <View>
      <View style={{ height: 490, backgroundColor: '#fffffe', alignItems: 'center' }}>
        {!plantBImg.uri ?
          <View style={{
            alignItems: 'center',
            height: height * 0.5,
            justifyContent: 'center',
          }}>
            <Text style={{
              fontSize: 18,
              color: '#A0D377'
            }}>
              快来选择专属作物吧~
            </Text>
          </View>
          : <></>}
        <Image
          source={{ uri: baseURL+plantBImg.uri }}
          style={{ marginTop: 15, width: width * 0.7, height: 350 }}
        />
        <Text style={{ maxWidth: width * 0.85, marginTop: 15, fontSize: 15, }}>
          {plantBImg.tips}
        </Text>
      </View>
      <View>
        {/* 导航栏 */}
        <View style={{ flexDirection: 'row', marginBottom: 5, backgroundColor: '#fffffe' }}>
          {
            tagsData.map(item => (
              <View style={{
                borderWidth: 0.5, borderColor: '#9AD37A',
                width: 82, height: 32,
              }}>
                <Btn
                  key={item.id}
                  onPress={() => {
                    setSelectTab(item.id)
                  }}
                  style={{
                    // width: '18%',
                    height: 30,
                    backgroundColor: selectTab == item.id ? '#A0D377' : '#fff',
                  }}
                  color={selectTab == item.id ? '#fff' : '#A0D377'}
                >
                  {item.label}
                </Btn>
              </View>
            ))
          }
        </View>
        {/* 图片区 */}
        <View style={{
          minHeight: 140,
          // borderColor:'#e6f',
          // borderWidth:1,
          flexDirection: 'row',
        }}>
          <FlatList
            data={plantSImgs}
            renderItem={({ item }) => {
              return (
                <View onStartShouldSetResponder={() => {setPlantImg({ uri: item.cropimg, tips: item.habit }); setCropsid(item.cropsid)}} style={{ width: 80, height: 80, marginLeft: 10 }}>
                  <ImageBackground
                    key={item.cropsid}
                    style={{ width: 80, height: 80, marginTop: 12, alignItems: 'center', justifyContent: 'center', opacity: 0.7, }}
                    source={{ uri: baseURL+item.cropimg }}
                  >
                    <Text style={{ fontSize: 15.5 }}>{item.cropname}</Text>
                  </ImageBackground>
                </View>
              )
            }}
            horizontal={true}
            showsHorizontalScrollIndicator={false}
          />
        </View>
        <View style={{ alignItems: 'center' }}>
          <Btn
            style={{
              width: 189,
              height: 32,
              backgroundColor: '#A0D377',
              borderRadius: 4
            }}
            onPress={select}
          >确认选择</Btn>
        </View>
      </View>
    </View>
  )
}

export default AddCrop